<template>
  <div>
    <common-head :title="msg" />
    <!-- 列表导航 -->
    <div class="list-bar">
        <div :class="['order', 'sale', {
          active: active.by === 'sale'
        }]"
        @click="orderSale"
        >
          <span>销量</span>
          <div :class="['angle', 'top', {
            active: active.by === 'sale' && active.order === 0
          }]"></div>
          <div :class="['angle', 'buttom', {
            active: active.by === 'sale' && active.order === 1
          }]"></div>
        </div>
        <div :class="['order', 'price', {
          active: active.by === 'price'
        }]"
        @click="orderPrice"
        >
          <span>价格</span>
          <div :class="['angle', 'top', {
            active: active.by === 'price' && active.order === 0
          }]"></div>
          <div :class="['angle', 'buttom', {
            active: active.by === 'price' && active.order === 1
          }]"></div>
        </div>
    </div>
    <div class="content">
      <div class="items-warp">
        <div
          class="item"
          v-for="item in items"
          @click="clickItem(item.id)"
          :key="item.id"
        >
          <img :src="item.pic" alt="">
          <p class="name">{{ item.name }}</p>
          <div class="price">
            <div>
              <span class="current-price">{{ item.minPrice | currency }} </span>
              <span class="original-price">{{ item.originalPrice | currency }}</span>
            </div>
            <van-icon @click.stop="addCart(item)" name="add-o" />
          </div>
        </div>
      </div>
    </div>
    <my-tabbar></my-tabbar>
  </div>
</template>

<script>
import CommonHead from 'components/CommonHead'
import MyTabbar from '@/components/MyTabbar'
import { currency } from 'utils/filters'
import { mapMutations } from 'vuex'
import { fetchItems } from 'api'
import { Toast } from 'vant'
export default {
  data () {
    return {
      msg: '商品列表页',
      active: {
        by: 'sale', // 按照什么排序 sale price
        order: 1 // 0 升序  1 降序
      },
      orderBy: 'orderDown', // 请求是所传排序标签字段
      items: [] // 列表商品
    }
  },
  created () {
    // console.log(this.$route.params)
    this.fetchItems()
  },
  methods: {
    addCart (item) {
      // 点击加入购物车
      item = {
        ...item,
        num: 1,
        checked: true
      }
      // 判断购物车中是否存在同样商品，是---num+1，否---添加商品
      this.add_cart(item)
      Toast('宝贝已添加到购物车，快去看看吧！')
    },
    clickItem (id) {
      // 点击跳转至详情页
      // console.log(id)
      this.$router.push(`/detail/${id}`)
    },
    // 点击销量
    orderSale () {
      // 判断是切换过来?再次点击
      if (this.active.by === 'price') {
        // true 切换过来
        // 切换过来 默认销量降序
        this.active.order = 1
        this.orderBy = 'orderDown'
      } else {
        // 再次点击自身
        if (this.active.order === 1) {
          this.active.order = 0
          this.orderBy = 'orderUp'
        } else {
          this.active.order = 1
          this.orderBy = 'orderDown'
        }
      }
      this.active.by = 'sale'
      this.fetchItems()
    },
    // 点击价格
    orderPrice () {
      if (this.active.by === 'sale') {
        this.active.order = 0
        this.orderBy = 'priceUp'
      } else {
        if (this.active.order === 0) {
          this.active.order = 1
          this.orderBy = 'priceDown'
        } else {
          this.active.order = 0
          this.orderBy = 'priceUp'
        }
      }
      this.active.by = 'price'
      this.fetchItems()
    },
    fetchItems () {
      fetchItems({
        categoryId: this.$route.params.id,
        orderBy: this.orderBy
      }).then(res => {
        // console.log(res)
        if (res.data.code === 0) {
          this.items = res.data.data
          // console.log(this.items)
        }
      })
    },
    ...mapMutations('cart', ['add_cart'])
  },
  components: {
    CommonHead,
    MyTabbar
  },
  filters: {
    currency
  }
}
</script>

<style lang="scss" scoped>
.list-bar{
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  left: 0;
  top: 50px;
  font-size: 21px;
  width: 100%;
  height: 40px;
  z-index: 10;
  background: #fffff1;
  border-bottom: 1px solid #888;
  .order{
    position: relative;
    &.active{
      border: 1px solid #808;
      span{
        color: #333;
      }
    }
    .angle{
      width: 0px;
      height: 0px;
      border: 7px solid transparent;
      position: absolute;
      left: 48px;
      &.top{
        top: 0px;
        border-bottom-color:#333;
        &.active{
          border-bottom-color:#faa;
        }
      }
      &.buttom{
        top: 16px;
        border-top-color:#333;
         &.active{
          border-top-color:#faa;
        }
      }
    }
    span{
      color: #666;
      height: 30px;
    }
  }
}
/deep/.content{
  margin-top: 91px;
  .items-warp{
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
    .item{
      width: 50%;
      text-align: center;
      font-size: 18px;
      vertical-align: top;
      justify-items: center;
      .name{
        text-align: left;
        padding: 0 10px;
        font-size: 16px;
        // 以下6行代码作用：显示2行文本，多出省略号代替
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .price{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        .current-price{
          color: cyan;
        }
        .original-price{
          color: #aaa;
          margin-right: 2px;
        }
        .van-icon{color: #f00;}
      }
      img{
        width: 90%;
        height: 180px;
      }
      img:hover{
        border: 1px solid #808
      }
    }
  }
}

</style>
